<div class="hbox hbox-auto-xs hbox-auto-sm" ng-init="
    app.settings.asideFolded = false; 
    app.settings.asideDock = false;
  ">
  <!-- main -->
  <div class="col">
    <!-- main header -->
    <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-sm-6 col-xs-12">
          <h1 class="m-n font-thin h3 text-black">Dashboard</h1>
          <small class="text-muted">Welcome to angulr application</small>
        </div>
        <div class="col-sm-6 text-right hidden-xs">
          <div class="inline m-r text-left">
            <div class="m-b-xs">1290 <span class="text-muted">items</span></div>
            <div ng-init="data1=[ 106,108,110,105,110,109,105,104,107,109,105,100,105,102,101,99,98 ]" 
              ui-jq="sparkline" 
              ui-options="{{data1}}, {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}" 
              class="sparkline inline">loading...
            </div>
          </div>
          <div class="inline text-left">
            <div class="m-b-xs">$30,000 <span class="text-muted">revenue</span></div>
            <div ng-init="data2=[ 105,102,106,107,105,104,101,99,98,109,105,100,108,110,105,110,109 ]" 
              ui-jq="sparkline" 
              ui-options="{{data2}}, {type:'bar', height:20, barWidth:5, barSpacing:1, barColor:'#dce5ec'}" 
              class="sparkline inline">loading...
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- / main header -->
    <div class="wrapper-md" ng-controller="FlotChartDemoCtrl">
      <div id="main" style="width: 1000px;height:1000px;"> </div>
    
      <!-- / streamline -->
    </div>
  </div>
  <!-- / right col -->
  <!-- right col -->
  <div class="col w-md bg-white-only b-l bg-auto no-border-xs">
    <tabset class="nav-tabs-alt" justified="true">
      <tab>
        <tab-heading>
          <i class="glyphicon glyphicon-user text-md text-muted wrapper-sm"></i>
        </tab-heading>
        <div class="wrapper-md">
          <div class="m-b-sm text-md">Who to follow</div>
          <ul class="list-group no-bg no-borders pull-in">
            <li class="list-group-item">
              <a herf class="pull-left thumb-sm avatar m-r">
                <img src="img/a4.jpg" alt="..." class="img-circle">
                <i class="on b-white bottom"></i>
              </a>
              <div class="clear">
                <div><a href>Chris Fox</a></div>
                <small class="text-muted">Designer, Blogger</small>
              </div>
            </li>
            <li class="list-group-item">
              <a herf class="pull-left thumb-sm avatar m-r">
                <img src="img/a5.jpg" alt="..." class="img-circle">
                <i class="on b-white bottom"></i>
              </a>
              <div class="clear">
                <div><a href>Mogen Polish</a></div>
                <small class="text-muted">Writter, Mag Editor</small>
              </div>
            </li>
            <li class="list-group-item">
              <a herf class="pull-left thumb-sm avatar m-r">
                <img src="img/a6.jpg" alt="..." class="img-circle">
                <i class="busy b-white bottom"></i>
              </a>
              <div class="clear">
                <div><a href>Joge Lucky</a></div>
                <small class="text-muted">Art director, Movie Cut</small>
              </div>
            </li>
            <li class="list-group-item">
              <a herf class="pull-left thumb-sm avatar m-r">
                <img src="img/a7.jpg" alt="..." class="img-circle">
                <i class="away b-white bottom"></i>
              </a>
              <div class="clear">
                <div><a href>Folisise Chosielie</a></div>
                <small class="text-muted">Musician, Player</small>
              </div>
            </li>
            <li class="list-group-item">
              <a herf class="pull-left thumb-sm avatar m-r">
                <img src="img/a8.jpg" alt="..." class="img-circle">
                <i class="away b-white bottom"></i>
              </a>
              <div class="clear">
                <div><a href>Aron Gonzalez</a></div>
                <small class="text-muted">Designer</small>
              </div>
            </li>
          </ul>
          <div class="text-center">
            <a href class="btn btn-sm btn-primary padder-md m-b">More Connections</a>
          </div>
        </div>
      </tab>
      <tab>
        <tab-heading>
          <i class="glyphicon glyphicon-comment text-md text-muted wrapper-sm"></i>
        </tab-heading>
        <div class="wrapper-md">
          <div class="m-b-sm text-md">Chat</div>
          <ul class="list-group no-borders pull-in auto">
            <li class="list-group-item">
              <span class="pull-left thumb-sm m-r"><img src="img/a1.jpg" alt="..." class="img-circle"></span>
              <a href class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
              <div class="clear">
                <div><a href="">Chris Fox</a></div>
                <small class="text-muted">about 2 minutes ago</small>
              </div>
            </li>
            <li class="list-group-item">
              <span class="pull-left thumb-sm m-r"><img src="img/a2.jpg" alt="..." class="img-circle"></span>
              <a href class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
              <div class="clear">
                <div><a href="">Amanda Conlan</a></div>
                <small class="text-muted">about 2 hours ago</small>
              </div>
            </li>
            <li class="list-group-item">
              <span class="pull-left thumb-sm m-r"><img src="img/a3.jpg" alt="..." class="img-circle"></span>
              <a href class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
              <div class="clear">
                <div><a href="">Dan Doorack</a></div>
                <small class="text-muted">3 days ago</small>
              </div>
            </li>
            <li class="list-group-item">
              <span class="pull-left thumb-sm m-r"><img src="img/a4.jpg" alt="..." class="img-circle"></span>
              <a href class="text-muted" ui-toggle-class="show" target=".app-aside-right"><i class="fa fa-comment-o pull-right m-t-sm text-sm"></i></a>
              <div class="clear">
                <div><a href="">Lauren Taylor</a></div>
                <small class="text-muted">about 2 minutes ago</small>
              </div>
            </li>
          </ul>
        </div>
      </tab>
      <tab>
        <tab-heading>
          <i class="glyphicon glyphicon-transfer text-md text-muted wrapper-sm"></i>
        </tab-heading>
        <div class="wrapper-md">
          <div class="m-b-sm text-md">Transaction</div>
          <ul class="list-group list-group-sm list-group-sp list-group-alt auto m-t">
            <li class="list-group-item">
              <span class="text-muted">Transfer to Jacob at 3:00 pm</span>
              <span class="block text-md text-info">B 15,000.00</span>
            </li>
            <li class="list-group-item">
              <span class="text-muted">Got from Mike at 1:00 pm</span>
              <span class="block text-md text-primary">B 23,000.00</span>
            </li>
            <li class="list-group-item">
              <span class="text-muted">Sponsored ORG at 9:00 am</span>
              <span class="block text-md text-warning">B 3,000.00</span>
            </li>
            <li class="list-group-item">
              <span class="text-muted">Send to Jacob at 8:00 am</span>
              <span class="block text-md">B 11,000.00</span>
            </li>
          </ul>
        </div>
      </tab>      
    </tabset>
    <div class="padder-md">      
      <!-- streamline -->
      <div class="m-b text-md">Recent Activity</div>
      <div class="streamline b-l m-b">
        <div class="sl-item">
          <div class="m-l">
            <div class="text-muted">5 minutes ago</div>
            <p><a href class="text-info">Jessi</a> commented your post.</p>
          </div>
        </div>
        <div class="sl-item">
          <div class="m-l">
            <div class="text-muted">11:30</div>
            <p>Join comference</p>
          </div>
        </div>
        <div class="sl-item b-success b-l">
          <div class="m-l">
            <div class="text-muted">10:30</div>
            <p>Call to customer <a href class="text-info">Jacob</a> and discuss the detail.</p>
          </div>
        </div>
        <div class="bg-info wrapper-sm m-l-n m-r-n m-b r r-2x">
          Create tasks for the team
        </div>
        <div class="sl-item b-primary b-l">
          <div class="m-l">
            <div class="text-muted">Wed, 25 Mar</div>
            <p>Finished task <a href class="text-info">Testing</a>.</p>
          </div>
        </div>
        <div class="sl-item b-warning b-l">
          <div class="m-l">
            <div class="text-muted">Thu, 10 Mar</div>
            <p>Trip to the moon</p>
          </div>
        </div>
        <div class="sl-item b-info b-l">
          <div class="m-l">
            <div class="text-muted">Sat, 5 Mar</div>
            <p>Prepare for presentation</p>
          </div>
        </div>
        <div class="sl-item b-l">
          <div class="m-l">
            <div class="text-muted">Sun, 11 Feb</div>
            <p><a href class="text-info">Jessi</a> assign you a task <a href class="text-info">Mockup Design</a>.</p>
          </div>
        </div>
        <div class="sl-item b-l">
          <div class="m-l">
            <div class="text-muted">Thu, 17 Jan</div>
            <p>Follow up to close deal</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / right col -->
</div>
<script src="js/chart/echarts.js"></script>
  <script src="js/chart/jquery-3.1.0.min.js"></script>
  <script type="text/javascript" src="js/chart/dataTools.js"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
        type: 'graph',
        tooltip: {},
        ribbonType: true,
        layout: 'circular',
        circular: {
            rotateLabel: true
        },
        symbolSize: 30,
        roam: false, //缩放
        focusNodeAdjacency: true,
        label: {
            normal: {
                position: 'center',
                fontWeight: 'bold',
                formatter: '{b}',
                normal: {
                    textStyle: {

                        fontFamily: '宋体'
                    }
                }
            }
        },

        edgeSymbol: ['circle'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            normal: {
                textStyle: {
                    fontSize: 13,
                    fontWeight: 'bold',
                    fontFamily: '宋体'
                }
            }
        },

        itemStyle: {
            normal: {
                label: {
                    rotate: true,
                    show: true,
                    textStyle: {
                        color: '#333',
                        fontWeight: 'bold'
                    }
                },
                color: ["#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51"] /* 内的颜色#393f51，外的颜色#393f51 */
            },
            emphasis: {
                label: {
                    show: true
                        // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                }
            }
        },

        data: [{
            name: 'Myriel',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }, {
            name: 'Napoleon',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }, {
            name: 'CountessDeLo',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }, {
            name: 'Geborand',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }, {
            name: 'Champtercier',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }, {
            name: 'Cravatte',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }, {
            name: 'Count',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }, {
            name: 'Petter',
            itemStyle: {
                normal: {
                    color: '#393f51'
                }
            }
        }],
        // links: [],
        links: [
{ source: 'Myriel', target: 'Napoleon', name: '67', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Myriel', target: 'CountessDeLo', name: '93', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Myriel', target: 'Geborand', name: '10', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Myriel', target: 'Champtercier', name: '24', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Myriel', target: 'Cravatte', name: '8', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Myriel', target: 'Count', name: '89', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Myriel', target: 'Petter', name: '43', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Napoleon', target: 'CountessDeLo', name: '92', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Napoleon', target: 'Geborand', name: '94', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Napoleon', target: 'Champtercier', name: '52', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Napoleon', target: 'Cravatte', name: '18', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Napoleon', target: 'Count', name: '29', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Napoleon', target: 'Petter', name: '20', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'CountessDeLo', target: 'Geborand', name: '59', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'CountessDeLo', target: 'Champtercier', name: '14', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'CountessDeLo', target: 'Cravatte', name: '82', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'CountessDeLo', target: 'Count', name: '24', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'CountessDeLo', target: 'Petter', name: '34', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Geborand', target: 'Champtercier', name: '17', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Geborand', target: 'Cravatte', name: '67', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Geborand', target: 'Count', name: '57', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Geborand', target: 'Petter', name: '18', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Champtercier', target: 'Cravatte', name: '38', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Champtercier', target: 'Count', name: '41', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Champtercier', target: 'Petter', name: '91', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Cravatte', target: 'Count', name: '9', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Cravatte', target: 'Petter', name: '9', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } },{ source: 'Count', target: 'Petter', name: '71', tooltip: { trigger: 'item', formatter: function(params, ticket, callback) { return params.data.name; } }, symbolSize: [5, 20], label: { normal: { formatter: function(params, ticket, callback) { params.name = params.data.name; return params.name; }, show: true } }, lineStyle: { normal: { width: 0.5, curveness: 0.2, color: '#fcae00' } } }
        ]
}]}
myChart.setOption(option);
    </script>